<template>
  <div class="approval-process-steps-item">
    <el-tag class="item-tag" closable size="large" type="info" @click="handleClickTag" @close="handleCloseTag">{{ showText }}</el-tag>
    <DialogApprovalProcessStepsItem ref="dialogApprovalProcessStepsItem" v-model="value" :listType="listType" />
  </div>
</template>
<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import DialogApprovalProcessStepsItem from './DialogApprovalProcessStepsItem.vue'

const dialogApprovalProcessStepsItem = ref()
const value = ref<any>(null)
defineProps({
  modelValue: {
    type: Object as any,
    default: null,
  },
  selectOptions: {
    type: Array as any,
    default: () => [],
  },
  listType: {
    type: Number,
    default: 0,
  },
})
const emit = defineEmits(['update:modelValue'])

const handleClickTag = () => {
  if (dialogApprovalProcessStepsItem.value) {
    dialogApprovalProcessStepsItem.value.openDialog()
  }
}

const handleCloseTag = () => {
  value.value = null
}

const showText = computed(() => {
  if (value.value) {
    return value.value.text
  } else {
    return '请选择'
  }
})

watch(
  () => value.value,
  (val) => {
    emit('update:modelValue', val)
  }
)
</script>
